<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        .word {
            transition: transform 2.5s linear;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- to do -->
    </div>

    <script src="../../../demo/jq/jq.js"></script>
    <script>

        // 定量用大写+下划线声明
        const PAGE_SIZE = 50;

        // string[]  (typescript)
        const data = new Array(10000).fill(0).map(function () {
            let word = '老铁666';
            const len = Math.floor(Math.random() * 10);
            for (let i = 0; i < len; i++) {
                word += 6;
            }
            return word;
        });

        function createElements () {
            const container = $('.container');
            for (let i = 0; i < PAGE_SIZE; i++) {
                // vw: view width
                // vh: view height
                const y = Math.random() * 100;
                const el = $(`
                    <div 
                        class="word" 
                        style="transform: translate(100vw, ${ y }vh)"
                        y="${y}"
                    >
                        ${ data[i] }
                    </div>
                `);
                container.append(el);
            }
        }

        let currentIndex = 0;
        function animate () {
            setInterval(function () {
                // currentIndex = 50
                const current = $('.word').eq(currentIndex % PAGE_SIZE);
                const y = current.attr('y');
                const target = -50 - Math.random() * 100;
                current.attr('style', `transform: translate(${ target }vw, ${ y }vh); visibility: visible;`);
                setTimeout(function () {
                    current.attr('style', `transform: translate(100vw, ${ y }vh); visibility: hidden;`);
                    const idx = (PAGE_SIZE + currentIndex) % data.length;
                    current.text(data[idx]);
                }, 2500);
                currentIndex++;
            }, 100);
        }

        // 0.1s 4.1s
        // 5.1s

        createElements();
        animate();

        console.log(data);
    </script>
</body>
</html>